<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
</script>

<template>
  <div class="admin-header">
    <!-- 左侧LOGO -->
    <div class="header-left">
      <div class="logo">
        <span class="logo-text">后台管理</span>
      </div>
    </div>

    <!-- 右侧管理员信息 -->
    <div class="header-right">
      <el-dropdown trigger="hover">
        <div class="admin-info">
          <span class="admin-name">关于</span>
          <el-icon class="dropdown-icon">
            <arrow-down />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu class="dropdown-menu">
            <el-dropdown-item class="menu-item">
              <el-icon><User /></el-icon>
              <span>个人中心</span>
            </el-dropdown-item>
            <el-dropdown-item class="menu-item" divided>
              <el-icon><SwitchButton /></el-icon>
              <span @click="$router.push('/login')">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>


<style scoped>
.admin-header {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  background: #fff;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05);
}

/* 左侧LOGO */
.header-left {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: #56a2ba;
  letter-spacing: 5px;
}

/* 右侧管理员信息 */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.admin-info:hover {
  background: rgba(32, 122, 178, 0.05);
}

.admin-name {
  font-weight: 500;
  color: #677ba3;
}

.dropdown-icon {
  color: #829dd5;
  transition: transform 0.3s;
}

/* 下拉菜单动画 */
.el-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* 下拉菜单样式 */
.dropdown-menu {
  margin-top: 8px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  min-width: 120px;
}

.menu-item:hover {
  color: #207ab2 !important;
  background: rgba(32, 122, 178, 0.04) !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .admin-header {
    padding: 0 16px;
  }

  .logo-text {
    font-size: 1.1rem;
  }

  .admin-name {
    display: none;
  }
}
</style>